<template>
  <div>
    <van-sticky>
         <van-nav-bar :title="title" >
        <template #left>
          <van-icon
            name="arrow-left"
            size="18"
            @click="onClickLeft"
            color="#f33"
          />
        </template>
        <template #right>
          <van-icon
            name="share-o"
            size="18"
            @click="showShare = true"
            color="#f33"
          />
          <van-share-sheet v-model="showShare" :options="options" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="container">
      <div class="toppic">
        <!-- 菜谱封面图 -->
        <img :src="`/cook_img/${pic}`" alt="" />

      </div>
      <!-- 菜谱标题 -->
      <div class="cook_book-title">
        {{title}}
      </div>
      <!-- 菜谱评分收藏浏览数 -->
      <div class="cook_book-info">
        <span>{{rate1}}综合评分</span> · <span>66收藏</span> · <span>888次浏览</span>
      </div>
      <!-- 作者信息 -->
      <div class="userinfo">
        <img
          :src="`/author_img/${upic}`"
          alt=""
          width="50px"
          height="50px"
        />
        <h4>{{userinfo.uname}}</h4>
        <van-button type="danger" size="mini">关&nbsp;&nbsp;注</van-button>
      </div>
      <p class="describe">{{describe}}</p>
      <div class="cook_book-ingredient">
        <h5>用料：</h5>
        <div class="ingredient">
          <span v-for="(p, i) of ingredient" :key="i">{{ p }}</span>
        </div>
      </div>
      <!-- 步骤 -->
      <div class="step">
        <div class="stepItem" v-for="(p, i) of content" :key="i">
          <h5>步骤{{ i + 1 }}：</h5>
          <div
            class="stepimg"
            :style="`background-image:url(/cook_img/${p.img})`"
          >
          </div>
          <p>
            {{ p.text }}
          </p>
        </div>
      </div>
    </div>

      <van-dialog v-model="showDialog" title="请为此作品评分😁" show-cancel-button confirmButtonText="提交"  :beforeClose="beforeClose">
        <van-rate v-model="rateValue" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" class="rate" />
      </van-dialog>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="联系" color="#f33" />
      <van-goods-action-icon v-if="isCollect" icon="star-o" text="收藏" color="#f33" @click="collect" />
      <van-goods-action-icon v-else icon="star" text="已收藏" color="#ff5000"  @click="nocollect"/>
      <van-goods-action-icon
        icon="flower-o"
        text="评分"
        color="#f33"
        @click="rateDialog"
      />
      <van-goods-action-icon icon="comment-o" text="评论" color="#f33" />
    </van-goods-action>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ingredient: [],
      details: "",
      title:'',
      rate1:'',
      describe:'',
      userinfo:{uname:'',upic:''},
      content:'',
      pic:'',
      rateValue: 5,

      upic:'',
      // newvalue: 0,
      showDialog: false,
       showShare: false,

      isCollect: true,

      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      value: 5,
      newvalue: 0,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    rateDialog() {
      for(var i=0;i < this.rate.length;i++){
        this.showDialog = false;
        if(this.rate[i].uname === this.$store.state.name){
          this.$dialog.alert({
            message: '您已经评分过了',
          });
        return;
        }
      }
       this.showDialog = true;
    },

    collect(){
      this.isCollect = false;
    },
    nocollect(){
      this.isCollect = true;
    },

    beforeClose(action, done) {
          if (action === "confirm") {
          console.log("[点击事件 确认"+this.rateValue);
          this.axios.put('/rate',`rate=,{rate:${this.rateValue},uname:"${this.$store.state.name}"}]&bid=${this.$route.query.bid}`).then(res=>{
            // console.log(res);

          })
          done(); // 关闭提示框
        } else if (action === "cancel") {
          // 取消
          console.log("[点击事件 取消");
          done(); // 关闭提示框
        }
    },
  },
  mounted() {
    let bid = this.$route.query.bid;
    window.scrollTo(0, 0);
    this.axios.get(`/cookBook?bid=${bid}`).then((result) => {
      this.details = result.data.data[0];

      this.rate = eval('('+ this.details.rate +')');
      console.log(this.rate);
      console.log(this.rate[0].uname);
      let sum = 0;
      for(var i=0;i < this.rate.length;i++){
        sum = this.rate[i].rate + sum;
      }
      let avg = sum / this.rate.length;
      console.log(avg);
      this.rate1=avg.toFixed(1);

      let str =this.details.ingredient;
      let arr = str.split(",");
      this.ingredient = arr;
      this.title=this.details.title;
      this.upic = this.details.upic;
      this.describe=this.details.describe;
      this.content=eval('('+ this.details.content +')') 
      console.log(this.content);
      console.log(this.details);

      this.userinfo={uname:this.details.uname,upic:this.details.upic}
      this.pic=this.details.pic});

      
      

  },

};
</script>
<style scoped>
.toppic {
  height: 240px;
  overflow: hidden;
}
.toppic img {
  width: 100%;
  /* position: absolute;
  top: -50%; */

}

.cook_book-title {
  text-align: center;
  font-size: 22px;
  margin-top: 20px;
  font-weight: 700;
  margin: 20px auto;
}
.cook_book-info {
  text-align: center;
  font-size: 14px;
  margin: 10px 0 20px 0;
}
.describe{
  margin: 10px 20px ;
  line-height: 28px;
  line-height: 28px;
  color: #232323;
}
.userinfo .van-button {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}
.userinfo img {
  margin: 0 20px;
  border-radius: 50%;
  vertical-align: middle;
}
.userinfo h4{
  font-weight: 700;
  display: inline-block;
  /* font-size: 18px; */
}
.cook_book-ingredient {
  margin: 20px 20px;
}
.cook_book-ingredient h5 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}
.cook_book-ingredient table {
  width: 100%;
}
.cook_book-ingredient table td {
  line-height: 40px;
}
.step {
  margin: 0 20px;
}
.step h5 {
  font-weight: 700;
  margin: 10px 0;
}
.stepItem {
  overflow: hidden;
}
.stepimg {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.step .stepItem p {
  line-height: 30px;
  font-size: 14px;
  margin: 20px 0;
}
.container {
  margin-bottom: 50px;
}
.cook_book-ingredient .ingredient span {
  font-size: 16 px;
  display: inline-block;
  width: 50%;
  line-height: 30px;
  border-bottom: 1px solid #f0f0f0;
  color: #656565;
}
.rate {
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  margin: 40px auto;
}

</style>
